<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户绑定</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/index.css">

	<style>
		body>img {
			width: 100%;
		}

		.toggle-container {
			background-color: #ecedf1;
			border-radius: 20px;
			position: relative;
		}

		.toggle {
			height: 40px;
			border-radius: 20px;
			width: 50%;
			background-color: #7e8eff;
			position: absolute;
			z-index: 1;
			left: 0;
			transition: left 0.5s;
		}

		.fix {
			position: relative;
			height: 40px;
			display: inline-block;
			width: calc(50% - 0.5ch);
			text-align: center;
			line-height: 40px;
			z-index: 2;
			transition: color 1s;
			color: black;
			box-sizing: border-box;
		}

		.toggle.right {
			left: 50%;
		}

		.fix.white {
			color: white;
		}

		.check_a {
			display: inline-block;
			line-height: 19px;
			font-size: 14px;
			text-decoration: none;
			color: #409EFF;
		}


		[v-if],
		[v-else] {
			display: none;
		}
	</style>

</head>

<body>
	<img src="/wechat/image/index_bg.jpg">

	<div id="vue-root" style="position: relative;top: -85px">
		<div class="index_intro">

			<div class="toggle-container">
				<div class="toggle" :class="{right:!isStudent}"></div>
				<div @click="isStudent=true" class="fix" :class="{white:isStudent}">绑定学生</div>
				<div @click="isStudent=false" class="fix" :class="{white:!isStudent}">绑定老师</div>
			</div>

			<div class="index_input_intro" v-if="isStudent">
				<ul>
					<li>
						<label>学生姓名</label>
						<input v-model="student.name">
					</li>
					<li>
						<label>绑定码</label>
						<input v-model="student.bindCode">
					</li>
					<li>
						<label>关系</label>
						<select class="index_select_intro" v-model="student.type">
							<option :value="undefined" selected="selected" disabled="disabled">请选择关系</option>
							<option :value="2">母亲</option>
							<option :value="1">父亲</option>
							<option :value="0">本人</option>
							<option :value="3">其他</option>
						</select>
					</li>
				</ul>
			</div>
			<div class="index_input_intro" v-else>
				<ul>
					<li>
						<label>老师姓名</label>
						<input v-model="teacher.name">
					</li>
					<li>
						<label>绑定码</label>
						<input v-model="teacher.bindCode">
					</li>
				</ul>
			</div>
			<div>
				<input type="checkbox" v-model="agree" style="margin-top: 20px;" />
				已阅读并同意<a href="agreement.html" class="check_a">用户隐私协议</a>
			</div>
			<div>
				<input class="index_input_button" type="button" value="绑定" @click="bind">
			</div>
		</div>

	</div>

	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				student: {
					type: null
				},
				teacher: {},
				checkbox: false,
				isStudent: true,
				agree: false
			},
			created: function () {
				if (location.hash === '#teacher') {
					this.isStudent = false;
				}
			},
			methods: {
				bind: function () {
					var o;

					if (!this.agree) {
						alert('请阅读并同意用户隐私协议');
						return;
					}

					if (this.isStudent) {
						o = this.student;
						if (!o.name || !o.bindCode || o.type === null) {
							alert('请填写完整');
							return;
						}

						axios.post('/api/bind/student', this.student).then(function (res) {
							location.href = 'student/student_center.html';
						});
					} else {
						o = this.teacher;
						if (!o.name || !o.bindCode) {
							alert('请填写完整');
							return;
						}

						axios.post('/api/bind/teacher', this.teacher).then(function (res) {
							location.href = 'teacher/teacher_center.html';
						});
					}

				}
			}
		})
	</script>

</body>

</html>